extends ../_layout

block active
  - sidebar_active = 'portlets.html'

block content
  .btn-group.pull-right
    button(type='button', data-reset-key="jq-portletState").btn.btn-default.btn-sm Reset Porlets
  h3 Portlets
    small Drag and collapse panels. Refresh and see how their state is automatically saved

  .portlets-wrapper
    // START row
    .row
      #portlet-1.col-lg-4(data-toggle="portlet")
        // START panel
        #panelPortlet1.panel.panel-default
          .panel-heading.portlet-handler
            | Default Panel
          .panel-wrapper
            .panel-body
              p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
            .panel-footer Panel Footer
        // END panel

        // START panel
        #panelPortlet2.panel.panel-primary
          .panel-heading.portlet-handler
            | Primary Panel
          .panel-wrapper
            .panel-body
              p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
            .panel-footer Panel Footer
        // END panel

        // START panel
        #panelPortlet3.panel.panel-success
          .panel-heading.portlet-handler
            | Success Panel
          .panel-body
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
          .panel-footer Panel Footer
        // END panel

        // START widget
        #panelPortlet4.panel.widget
          .portlet-handler
            .row.row-table.row-flush
              .col-xs-4.bg-danger.text-center
                em.fa.fa-music.fa-2x
              .col-xs-8
                .panel-body.text-center
                  h4.mt0 100%
                  p.mb0.text-muted VOLUME
        // END widget

        // START widget
        #panelPortlet5.panel.widget
          .portlet-handler
            .row.row-table.row-flush
              .col-xs-4.bg-inverse.text-center
                em.fa.fa-code-fork.fa-2x
              .col-xs-8
                .panel-body.text-center
                  h4.mt0 150 
                  p.mb0.text-muted FORKS
        // END widget

      #portlet-2.col-lg-4(data-toggle="portlet")
        // START panel
        #panelPortlet6.panel.panel-info
          .panel-heading.portlet-handler
            | Info Panel
          .panel-body
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
          .panel-footer Panel Footer
        // END panel

        // START panel
        #panelPortlet7.panel.panel-warning
          .panel-heading.portlet-handler
            | Warning Panel
          .panel-body
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
          .panel-footer Panel Footer
        // END panel

        // START panel
        #panelPortlet8.panel.panel-danger
          .panel-heading.portlet-handler
            | Danger Panel
          .panel-body
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
          .panel-footer Panel Footer
        // END panel

        // START widget
        #panelPortlet9.panel.widget
          .portlet-handler
            .row.row-table.row-flush
              .col-xs-12
                .panel-body.text-center.bg-purple
                  h4.mt0 10k
                  p.mb0.text-white VISITORS
        // END widget

        // START widget
        #panelPortlet10.panel.widget
          .portlet-handler
            .row.row-table.row-flush
              .col-xs-12
                .panel-body.text-center.bg-pink
                  h4.mt0 100%
                  p.mb0.text-white VOLUME
        // END widget

      #portlet-3.col-lg-4(data-toggle="portlet")
        // START panel
        #panelPortlet11.panel.panel-inverse
          .panel-heading.portlet-handler
            | Inverse Panel
          .panel-body
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
          .panel-footer Panel Footer
        // END panel

        // START panel
        #panelPortlet12.panel.panel-purple
          .panel-heading.portlet-handler
            | Purple Panel
          .panel-body
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
          .panel-footer Panel Footer
        // END panel

        // START panel
        #panelPortlet13.panel.panel-green
          .panel-heading.portlet-handler
            | Green Panel
          .panel-body
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.
          .panel-footer Panel Footer
        // END panel

        // START widget
        #panelPortlet14.panel.widget
          .portlet-handler
            .row.row-table.row-flush
              .col-xs-12
                .panel-body.text-center.bg-green
                  h4.mt0 150 
                  p.mb0.text-white FORKS
        // END widget

        // START widget
        #panelPortlet15.panel.widget
          .portlet-handler
            .row.row-table.row-flush
              .col-xs-12
                .panel-body.text-center.bg-primary
                  h4.mt0 10
                  p.mb0.text-white NEW MESSAGES
        // END widget

    // END row

block vendor_js
  // JQUERY UI
  script(src='../vendor/jquery-ui/ui/core.js')
  script(src='../vendor/jquery-ui/ui/widget.js')
  script(src='../vendor/jquery-ui/ui/mouse.js')
  script(src='../vendor/jquery-ui/ui/draggable.js')
  script(src='../vendor/jquery-ui/ui/droppable.js')
  script(src='../vendor/jquery-ui/ui/sortable.js')
  script(src='../vendor/jqueryui-touch-punch/jquery.ui.touch-punch.min.js')
